{% extends "baseD.html" %}

{% block headtitle %}- Control Pan-Tilt-Zoom Camera {% endblock %}

{% block divtitle %}- Control Pan-Tilt-Zoom Camera {% endblock %}

{% block css %}
<link href="/live3dstatic/css/viewScene.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}


{% block scripts %}
<script type="text/javascript" src="/live3dstatic/scripts/helperFunctions.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/matrix.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/earthPoint.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/earth.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/calibration.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/ptzCalibration.js"> </script>
<script type="text/javascript" src="/live3dstatic/scripts/controlCamera.js"> </script>


<script type="text/javascript">

{% if calib %}
	var ptzCalib;
	var controlCamera;
	function initCalibration(){
		var origin = {lat: {{calib.originLatitude}}, lon: {{calib.originLongitude}}, alt: {{calib.originAltitude}}};
		var cameraPosition = {x: {{calib.tx}}, y: {{calib.ty}}, z: {{calib.tz}}, lat: {{scene.cameraLatitude}}, lon: {{scene.cameraLongitude}}, alt: {{scene.cameraAltitude}}};
		var zoomRanges = new Array({{scene.zoomOutRange}}, {{scene.zoomInRange}});
		var panRanges = new Array({{scene.panLeftRange}}, {{scene.panRightRange}});
		var tiltRanges = new Array({{scene.tiltDownRange}}, {{scene.tiltUpRange}});
		var totalPanRad = {{scene.totalPanDegrees}} * PI / 180;
		var totalTiltRad = {{scene.totalTiltDegrees}} * PI / 180;
		ptzCalib = new PTZCalibration('{{scene.baseURL}}', origin, cameraPosition, {{calib.focalLengthF1}}, {{calib.focalLengthF2}},{{calib.focalLengthF3}},
								{{calib.panOffsetRad}}, {{calib.tiltOffsetRad}}, {{calib.rollOffsetRad}},
								panRanges, tiltRanges, zoomRanges,
								totalPanRad, totalTiltRad,
								{{scene.width}}, {{scene.height}},
								'{{scene.url}}')
								
		setInterval('ptzCalib.refresh()', 1000);
	}
	
	function init3D(){
		initCalibration();
		controlCamera = new ControlCamera('{{scene.url}}', '{{scene.baseURL}}/', ptzCalib);
		setInterval('controlCamera.refreshImage()', 1000);
		setInterval('controlCamera.moveCameraLoop()', 1000)
		
	}
	
	function initCamera(){
		
	}
{% else %}
	function init3D(){
	}
{% endif %}

	
	

</script>
{% endblock %}

{% block onload %}initCamera(); googleInit(); {% endblock %}
	
{% block content %}
	
    <div id="contentpage"  style="margin-left:40px; margin-right:40px;">
	<div id="container">
	<div id="leftside_ptz">
		<div class="group">
		<h3>
		{% if scene.name %}
			 {{scene.name}}<br/>
		{% endif %}
		
		 </h3>
		 From <a href="{{scene.sourceURL}}">{{scene.sourceURL}}</a>
	
		<img id="smallimage" src="{{ scene.url }}" alt="" /><br/>
				{% for i in stars %}
						{% if votable %}
							<a href="../rate?scene={{scene.index}}&amp;rating={{forloop.counter}}">

							<img class="ratinglink" src="/live3dstatic/images/{%if i %}star{%else%}unstar{%endif%}.png">
							</a>
						{% else %}
							{% if user %}
							<img class="ratinglink" alt="You've already voted for this scene." src="/live3dstatic/images/{%if i %}star{%else%}unstar{%endif%}.png">
							{% else %}
							<img class="ratinglink" src="/live3dstatic/images/{%if i %}star{%else%}unstar{%endif%}.png">
							{% endif %}
						{% endif %}
					{% endfor %}
					<br/>
					 {% if scene.ratingAverage %}
					Rating: {{scene.ratingAverage|floatformat}} out of 5
					 {% else %}
					This scene has not been rated.
					 {% endif %}
					
					
					{% if username %}
					{% else %}
					<br/><a href="{{logInURL}}">Log in</a> to rate a scene.
					{% endif %}
				
				{% if corrsLeft %}
				<p> The camera will be calibrated after {{corrsLeft}} more correspondence{{corrsLeft|pluralize}} are added to the scene. </p>
				{% endif %}
				
			
				{% if calib %}
				<hr/>
				<p class='optionsheader'>Camera Options</p>
				<div class='optionspanel'>
					Automatically Reset View:
					<input type="checkbox" id="autoReset" checked /><br/>
					
					
					Frustum size:
					<input type="text" id="edgeLength" value="50">
					<br/>
					{% if admin %}
				
						Panorama Montage:
						<input type="checkbox" id="montageBox" /><br/>
						<br/>
						
						Take picture:
						<input type="checkbox" id="montageReadyBox" unchecked/><br/>
						<br/>
					
					{% endif %}
					
					
					Camera Control:<span id='cameraMessage'> </span>
					<input type='button' value='click me!' onclick='controlCamera.optimizeForPanTilt(0.5)'>
				</div>
				{% endif %}

			<hr/>

			<p class='optionsheader'>Other Options</p>
			<div class='optionspanel'>
				<ul>
					<li><a href='build?scene={{ scene.index }}'>Add more to this scene</a></li>
					<li><a href='viewAll'>See all scenes</a> </li>
				</ul>
			</div>
			
			</div>
		
		
	</div>
	
	<div id="rightside_ptz">
		<div class="group">
			<div id='map3d'></div>
			<input type="checkbox" onchange="toggleBuildings();" id="showBuildings" checked/>
			<label for="showBuildings">  Show Buildings </label>
				
			<input type="checkbox" onchange="toggleGrayBuildings();" id="showGrayBuildings" checked/>
			<label for="showGrayBuildings">  Show Gray Buildings </label>
		</div>
	</div>
	</div>
	
	{% if username %}
	Signed in as {{username}}.  <a href="{{logOutURL}}">Log out.</a>
	{% else %}
	You are not currently logged in.  <a href="{{logInURL}}">Log in.</a>

	{% endif %}

	<div style="clear: both;"></div>
    </div><!-- end contentpage --> 
{% endblock %}
		
{% block scripts2 %} {% endblock %}